import React, { FC, useEffect } from 'react';
import Form_Demo from './Form_Demo';
import { Tabs, Form, Button } from 'antd';
import Demo from './Demo';

const { TabPane } = Tabs;

const Form_shouldUpdate: FC = () => {
  const [form] = Form.useForm();

  useEffect(() => {
    console.log(form.getFieldsValue());
  }, [form.getFieldsValue()]); // 默认监听这个是不生效的,相当于监听的就是普通的变量而不是状态,如果想要监听普通的变量,必须在修改变量的时候,重新render(重新获取一遍这个变量,并且要与之前的值不同)

  const onFinish = (values: any) => {
    console.log(values);
  };

  return (
    <>
      <Demo />

      <Form name="Form_shouldUpdate" onFinish={onFinish} form={form}>
        <Tabs>
          <TabPane tab="one" key="1">
            <Form_Demo index="1" />
          </TabPane>
          <TabPane tab="two" key="2">
            <Form_Demo index="2" />
          </TabPane>
        </Tabs>

        <Form.Item>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
        </Form.Item>
      </Form>
    </>
  );
};

export default Form_shouldUpdate;
